<template>
  <div class="aad-main">
    <div id="container"></div>
    <div class="aad-main-body" @click.stop="closePop"></div>
    <div class="aad-main-pop">
      <div class="aad-pop-top">
        <h3>告警区域新增</h3>
        <i class="el-icon-error" style="color: #FF524A;position:absolute;right: 20px;font-size: 20px" @click="closePop"></i>
      </div>
      <div class="aad-process">
        <i class="el-icon-location active"  v-if="processStep == '1'"></i>
        <i class="el-icon-check active"  v-if="processStep == '2'"></i>
        <div class="aad-striping" :class="{active:processStep == '2'}"></div>
        <i class="aad-icon-circle active" v-if="processStep == '1'"></i>
        <i class="el-icon-location active" v-if="processStep == '2'"></i>
        <div class="aad-striping" :class="{active:processStep == '3'}"></div>
        <i class="aad-icon-circle active"></i>
        <dic class="aad-process-txt">
          <span class="aad-base-info">基本信息</span>
          <span class="aad-base-info" style="margin: 0 13.5%">关联人</span>
          <span class="aad-base-info">&nbsp;&nbsp;完成&nbsp;&nbsp;</span>
        </dic>
      </div>
      <div v-if="processStep == '1'">
        <!--区域名称-->
        <el-form ref="form" :model="areaForm" class="aad-area-form" :inline="true" style="padding-top: 10px;height: 30px;">
          <span class="form-label-name">区域名称&nbsp;:</span>
          <el-form-item>
            <el-input v-model="areaName" ></el-input>
          </el-form-item>
        </el-form>
        <!--区域备注-->
        <el-form ref="form1" :model="areaForm" class="aad-area-form" :inline="true" style="padding-top: 10px;height: 30px;">
          <span class="form-label-name">区域备注&nbsp;:</span>
          <el-form-item >
            <textarea
              type="text"
              style="background-image: none;
                     border-radius: 4px;
                     border: 1px solid #DCDFE6;
                     -webkit-box-sizing: border-box;
                     box-sizing: border-box;width:300px;height:100px;overflow-y: scroll;"
              v-model="areaRemarks"></textarea>
          </el-form-item>
        </el-form>
        <!--告警范围类型-->
        <el-form ref="form2" style="margin-top: 70px;">
          <div  style="display: flex">
            <span class="form-label-name">&nbsp;告警范围类型&nbsp;:</span>
            <el-form-item>
              <div>
                <el-radio-group v-model="areaType">
                  <el-radio :label="'行政区域'">行政区域</el-radio>
                  <el-radio :label="'自定义围栏'">自定义围栏</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
          </div>
        </el-form>
        <!--如果选择行政区域，下方有地市，区县选项-->
        <!--地市-->
        <el-form ref="form3" class="aad-area-form">
          <div  v-if="areaType == '行政区域'">
            <span class="form-label-name">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地市&nbsp;:</span>
            <el-form-item >
              <div>
                <el-checkbox-group style="padding-left: 70px;margin-top: -40px;margin-right: 100px;"
                                   v-model="areaCheckedCity" @change="handleAreaCityChange">
                  <el-checkbox v-for="cityName in cityOptions" :label="cityName" :key="cityName">{{cityName}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-form-item>
          </div>
        </el-form>
        <!--区县-->
        <el-form ref="form4" class="aad-area-form">
          <div v-if="areaType == '行政区域'">
            <span class="form-label-name">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区县&nbsp;:</span>
            <div v-if="areaCheckedCity == '南京市'">
              <el-form-item>
                <div>
                  <el-checkbox-group style="padding-left: 70px;margin-top: -40px;margin-right: 100px;"
                                     v-model="areaCheckedCounty" @change="handleAreaCountyChange">
                    <el-checkbox v-for="county in countyOptions" :label="county" :key="county">{{county}}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <!--如果选择自定义围栏，下方提示-->
        <el-form ref="form5" class="aad-area-form">
          <div v-if="areaType == '自定义围栏'">
            <span class="form-label-name" style="color: red;padding-left: 70px"
            >请使用屏幕右侧的工具栏，编辑自己想要的告警范围</span>
          </div>
        </el-form>
        <div v-if="areaType == '自定义围栏'">
          <div class="menu1 menuStyle1">
            <div class="tubiaoc">
              <div class="tubiao">
                <span class="iconfont iconkefuzhongxin specicon" @change="handleXian"></span>
                <span class="iconfont iconkefuzhongxin specicon" @change="handleCircle"></span>
                <span class="iconfont iconkefuzhongxin specicon" @change="handleArea"></span>
                <span class="iconfont iconkefuzhongxin specicon" @change="handlekuang"></span>
              </div>
            </div>
          </div>
        </div>

        <!--下一步、取消-->
        <el-form ref="form"  class="aad-area-form" style="padding:10px 30px 20px;text-align: center">
          <el-form-item>
            <el-button type="primary" @click="nextStep" size="mini">下一步</el-button>
            <el-button size="mini" @click="closePop">取消</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div v-if="processStep == '2'">
        <div class="associates-box">
          <el-tree
            ref="personTree"
            :data="personData"
            :props="defaultProps"
            show-checkbox
            node-key="objectId"
            @check-change="handleCheckChange">
          </el-tree>
        </div>
        <el-form ref="form2"  class="aad-area-form" style="text-align: center">
          <el-form-item>
            <el-button type="primary" @click="previousStep" size="mini">上一步</el-button>
            <el-button type="primary" @click="submit" size="mini">确定</el-button>
            <el-button size="mini" @click="closePop">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <AreaAlarmMaim v-show="AreaFlag"
             :newAreaFlag="AreaFlag"></AreaAlarmMaim>
  </div>
</template>

<script>
  import AreaAlarmMain from 'components/configServers/AreaAlarm/AreaAlarmMain.vue'
  import {dateFormat} from '@/base/utils.js'

  const cityOptions = ['南京市','南通市','苏州市','无锡市','常州市',
    '扬州市','淮安市','泰州市','徐州市','盐城市',
    '镇江市','宿迁市','连云港市'];
  const countyOptions = ['玄武区','鼓楼区','栖霞区','雨花区','江宁区',
    '六合区','浦口区','溧水区','高淳区','江北新区'];
  export default {
    components: {AreaAlarmMain},
    props:['newAreaFlag'],
    data(){
      return{
        processStep:'1',//步骤
        areaForm:{},
        areaName:'',
        areaRemarks:'',//区域备注
        areaType:'行政区域',//区域类型
        personNum:'',//关联人员数
        modifyDate:'',//最新操作时间
        modifyOperatorName:'',//操作人
        status:'',//状态
        areaCheckedCity:['南京市'],//地市选择
        cityIndeterminate:false,
        cityOptions:cityOptions,
        areaCheckedCounty:['玄武区'],//地市选择
        countyIndeterminate:false,
        countyOptions:countyOptions,


        polyline: '',//线
        rectangle:'',//矩形
        circle:'',//原
        overlays:[],//覆盖物
        mouseTool:'',//鼠标组件
        map:'',//地图
        zoom: 14,
        center: [116.397428, 39.90923],
        lineArr: [[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]],
        marker: '',//轨迹
        markerPoint: [[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]],//人员点位
        markers: [],

        passedPolyline: '',//经过的轨迹

        areaFlag : false,
        personData: [],
        defaultProps: {
          children: 'childList',
          label: 'objectName'
        },
        submitParam:{},
        isDisabled: {
          disabledDate(time) {
            // 设置日期限制 小于某个日期不能选择
            return time.getTime() < new Date().getTime() - 8.64e7;
          }
        }
      }
    },
    methods:{
      closePop(){
        this.areaFlag=true;
        this.$emit('emClosePop');
        this.processStep = '1';
        this.areaName='';
        this.areaRemarks='';
        this.areaType='行政区域';
        this.cityIndeterminate=false;
        this.weekCheckedDate=[];
        this.countyIndeterminate=false
        this.monthCheckedDate=[];

      },
      previousStep(){
        this.processStep = '1';
      },
      //地市选择遍历
      handleAreaCityChange(value) {
        let checkedCount = value.length;
        this.cityIndeterminate = checkedCount > 0 && checkedCount < this.cityOptions.length;
      },
      //县区选择遍历
      handleAreaCountyChange(){
        let checkedCount = value.length;
        this.countyIndeterminate = checkedCount > 0 && checkedCount < this.countyOptions.length;
      },
      nextStep(){
        this.processStep = '2';
        let specificCity = [];
        this.areaCheckedCity.forEach(item => {
          specificCity.push(item.substring(0,item.length-1))
        });
        let specificCounty =[];
        this.areaCheckedCounty.forEach(item =>{
          specificCounty.push(item.substring(0,item.length-1))
        })

        this.submitParam = {
          areaName:this.areaName,//区域名称
          areaRemarks:this.areaRemarks,//区域备注
          areaType:this.areaType == '行政区域'?'行政区域':'自定义围栏',//区域类型
          specificCity:this.areaType == '行政区域'?this.areaCheckedCity.toString().replace('南京市',1).replace('南通市','2')
            .replace('苏州市','3').replace('无锡市','4').replace('常州市','5')
            .replace('扬州市','6').replace('淮安市','7').replace('泰州市','8')
            .replace('徐州市','9').replace('盐城市','10').replace('镇江市','11')
            .replace('宿迁市区','12').replace('连云港市','13'):specificCity.toString(),
          specificCounty:this.areaType == '行政区域'&&this.areaCheckedCity == '南京市'?this.areaCheckedCounty.toString().replace('玄武区','1')
            .replace('鼓楼区','2').replace('栖霞区','3').replace('雨花区','4')
            .replace('江宁区','5').replace('六合区','6').replace('浦口区','7')
            .replace('溧水区','8').replace('高淳区','9').replace('江北新区','10')
            :specificCounty.toString(),
        }
      },


      getMap() {
        // amap vue component
        console.log(amapManager._componentMap);
        // gaode map instance
        console.log(amapManager._map);
      },
      // //初始化地图
      // initMap(){
      //   this.map = new AMap.Map("container", {
      //     resizeEnable: true,
      //     center: this.center,
      //     zoom: this.zoom
      //   });
      // },
      // //初始化图标
      // initMouseTool(){
      //   this.mouseTool = new Amap.MouseTool(this.initMap())
      //   this.overlays = [];
      // },
      // //画线
      // handleXian(){
      //   this.initMouseTool();
      // },






      handleCheckChange(data){
        console.log('选择的人',data)
      },
      qryGroupAndMemberByUserId(){
        this.$http.post('/lbs/usercenter/group/qryGroupAndMemberByUserId').then(res => {
          if(res.data.retCode == '0'){
            this.personData = res.data.data.groupList;
          }else{
            this.$message({
              message: res.data.retMsg,
              type: 'error'
            });
          }
        })
      },
      async submit() {
        let judgeRes = await this.judgeNameRepeat(this.submitParam.areaName);
        if (judgeRes.data.retCode == '0') {
          if (judgeRes.data.data == '1') {
            this.$message({
              message: judgeRes.data.retMsg,
              type: 'warning'
            });
            return;
          }
        } else {
          this.$message({
            message: judgeRes.data.retMsg,
            type: 'error'
          });
          return;
        }
        let adminGroupIds = this.$refs.personTree.getCheckedNodes();
        adminGroupIds = adminGroupIds.filter(item => {
          return item.objectType = '2';
        })
        let adminGroupIdsKey = adminGroupIds.map(item => {
          return item.objectId;
        })
        let newSet = [...new Set(adminGroupIdsKey)];
        this.submitParam.relPersonIds = JSON.stringify(newSet);
        this.$http.post('/lbs/locatepeople/locatearea/createLocatearea', this.submitParam).then(res => {
          if (res.data.retCode == '0') {
            this.$message({
              message: res.data.retMsg,
              type: 'success'
            });
            this.closePop()
          } else {
            this.$message({
              message: res.data.retMsg,
              type: 'error'
            });
          }
        })
      },
      judgeNameRepeat(areaName){
        let param = {
          "areaName": areaName
        }
        return this.$http.post('/lbs/locatepeople/locatearea/judgeareaNameRepeat',param);
      }
    },
    watch:{
      newAreaFlag(val){
        if(val){
          this.qryGroupAndMemberByUserId();
        }
      }
    },
    mounted(){
      setTimeout(()=>{
        this.initMap();
        this.initMouseTool();
        this.showCityInfo();
        },400)
    }
  }
</script>

<style scoped lang="less">
  .aad-main{
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
  }
  .aad-main-body{
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    background:#000000;
    opacity: 15%;
    z-index: 99;
  }
  .aad-main-pop{
    height: auto;
    width: 700px;
    border-radius: 15px;
    background:#fff;
    z-index: 100;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  .aad-pop-top{
    width: 100%;
    height: 60px;
    background: #F9F9F9;
    z-index: 101;
    border-radius: 15px 15px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .aad-process{
    width: 100%;
    height: 60px;
    z-index: 101;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .aad-striping{
    width: 16%;height: 1px;background: #D1D1D1;
  }
  .aad-striping.blue{background: #007AFF;}
  .el-icon-location.active{
    background: #007aff;
    font-size: 16px;
    padding: 4px;
    color: #fff;
    border-radius: 15px;
    margin-left: 5px;
  }
  .el-icon-check.active{
    background: #30B86B;
    font-size: 16px;
    padding: 4px;
    color: #fff;
    border-radius: 15px;
    margin-left: 5px;
    font-weight: 600;
  }
  .aad-icon-circle.active{
    background: #fff;
    height: 10px;
    width: 10px;
    border: 7px solid #D3D3D3;
    border-radius: 15px;
    margin-left: 5px;
  }
  .aad-process-txt{
    width: 100%;
    position: absolute;
    bottom: 0;
    text-align: center;
  }
  .aad-base-info{
    font-size: 12px;
    color: #656565;
  }
  .aad-area-form{
    padding: 0px 30px 7px;
  }
  .aad-area-form-active{
    padding: 0px 30px 7px;
  }
  .associates-box{
    height: 300px;
    width: 500px;
    margin: 20px 90px;
    background: #f7f7f7;
    overflow: auto;
    padding: 25px;
    box-sizing: border-box;
  }
  .form-label-name{
    font-size: 14px;
    line-height: 41px;
    padding-right: 7px;
    color: #606266;
  }
</style>
<style lang="less">
  .aad-main {
    .el-input__inner {
      height: 24px;
      line-height: 24px;
    }
    .el-input {
      width: auto;
    }
    .aad-demonstration{
      font-size: 14px;
      color: #606266;
    }
    .el-date-editor .el-range__icon{
      line-height: 16px;
    }
    .el-date-editor .el-range-input, .el-date-editor .el-range-separator{
      font-size: 12px;
    }
    .el-date-editor .el-range-separator{
      line-height: 16px;
    }
    .el-date-editor .el-range__close-icon{
      line-height: 16px;
    }
    .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner{
      width: 220px;
    }
    .el-form-item{
      margin-bottom: 0;
    }
    .el-radio-button__inner{
      padding: 2px 5px;
      font-size: 12px;
    }
    .el-checkbox{
      margin-right: 15px;
    }
    .el-tree{
      background: none;
    }
  }
  .aad-area-form-active{
    .el-form-item__content{
      line-height: 25px;
    }
  }
  .el-table::before{
    height: 0;
  }



  .menu1 {
    display: flex;
    position: absolute;
    top: 10px;
    left: 15px;
    background-color: #fff;
    border-radius: 16px;
    opacity: 0.98;
    box-shadow: 4px 4px 7px 0px rgba(133, 133, 133, 0.17);
    .tubiaoc {
      width: 85px;
      height: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 16px;
      background-color: #F9F9F9;
      border-right: 1px solid #E8E8E8;
    }
    .levelA {
      flex: 1;
      .user {
        height: 70px;
        background-color: #F9F9F9;
        border-radius: 0 16px 0 0;
      }
    }
  }
  @media screen and (max-height: 822px) {
    .menuStyle1 {
      bottom: 30px;
      height: 200px;
      margin-left: 1000px;
      margin-top: 300px;
    }
  }
  @media screen and (min-height: 823px) and (max-height: 900px) {
    .menuStyle1 {
      height: 800px;
    }
  }
  @media screen and (min-height: 901px) {
    .menuStyle1 {
      height: 900px;
    }
  }
  .tubiao {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    position: relative;
    cursor: pointer;
    .iconfont {
      font-size: 36px;
      color: #007AFF;
    }
    .specicon {
      font-size: 30px;
      margin-bottom: 2px;
    }
  }
</style>
